<template>
  <a-modal v-model:visible="visible" title=" " :footer="false" width="900px">
    <div :loading="loading">
      <div style="background: rgb(var(--primary-5)); display: flex; align-items: center; color: #ffffff; padding: 10px">
        <icon-info-circle-fill />
        <div id="manuscripts_num" style="margin-left: 10px">单次固定交稿数量：{{ props.num }}稿</div>
      </div>

      <div style="margin: 30px 0">
        <a-timeline>
          <a-timeline-item
            v-for="(item, index) in keywordList"
            :key="index"
            :label="item.create_time"
            dotColor="#00B42A"
          >
            <template #dot>
              <div class="dot"></div>
            </template>
            <div style="background: #f1f1f1; padding: 20px">
              <div style="display: flex; align-items: center; justify-content: space-between">
                <div style="display: flex; align-items: center; border: 2px solid rgb(var(--primary-5))">
                  <div
                    style="
                      background: rgb(var(--primary-5));
                      height: 100%;
                      text-align: center;
                      color: #fff;
                      font-size: 12px;
                      padding: 5px 15px;
                      font-weight: bold;
                    "
                  >
                    提出时间
                  </div>
                  <div style="margin-left: 50px; margin-right: 50px">
                    {{ item.keyword_time && format(item.keyword_time * 1000, 'yyyy/MM/dd HH:mm:ss') }}
                  </div>
                </div>
                <div style="display: flex; align-items: center">
                  <div style="font-weight: bold; font-size: 14px">提出人:{{ item.showPersion }}</div>
                  <a-tag style="margin-left: 50px" :key="index" :color="item.operator_type == 1 ? 'green' : 'blue'">{{
                    item.operator_type == 1 ? '用户' : '客服'
                  }}</a-tag>
                </div>
              </div>
              <div>
                <div style="font-weight: bold; padding-top: 15px">关键词</div>
                <div
                  style="
                    background: #fff;
                    padding: 4px;
                    margin: 15px 0;
                    font-weight: bold;
                    border-radius: 6px;
                    word-wrap: break-word;
                  "
                >
                  {{ item.keyword }}
                </div>
              </div>
              <div
                v-if="props.type == 'audit' && index == 0"
                style="display: flex; justify-content: flex-end; margin-top: 15px"
                id="botton"
              >
                <a-button
                  @click="
                    () => {
                      currentKeyword = item
                      rejectModalRef.show()
                    }
                  "
                  size="small"
                  >驳回</a-button
                >
                <a-popconfirm @ok="confirm" content="确定审核通过吗？">
                  <a-button style="margin-left: 10px" size="small" type="primary">审核通过</a-button>
                </a-popconfirm>
              </div>
              <div
                v-if="index !== 0 || props.taskStatus == 2"
                style="display: flex; justify-content: flex-end; margin-top: 15px"
              >
                <span
                  style="
                    display: inline-block;
                    padding: 2px 4px;
                    border: 1px solid #ccc;
                    color: #ccc;
                    border-radius: 6px;
                    font-size: 12px;
                  "
                  >已驳回</span
                >
              </div>
            </div>
          </a-timeline-item>
        </a-timeline>
      </div>
    </div>
  </a-modal>
  <rejectModal @handleSuccess="handleSuccess" :userInfo="currentKeyword" ref="rejectModalRef"></rejectModal>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { Message, Modal, type FormInstance } from '@arco-design/web-vue'
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon'
import { getKeyWordList, keywordListUpdate } from '@/apis'
import { format } from 'date-fns'
import rejectModal from './rejectModal.vue'

const props = defineProps({
  num: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: ''
  },
  taskId: {
    type: String,
    default: ''
  },
  taskStatus: {
    type: String, //2关键词审核不通过 1待审核关键词
    default: ''
  }
})
const handleSuccess = () => {
  visible.value = false
  emits('handleSuccess')
}
const emits = defineEmits(['handleSuccess'])
const currentKeyword = ref({})
const rejectModalRef = ref(null)
const visible = ref(false)
const loading = ref(false)
const keywordList = ref([])
const initKeyWordList = async () => {
  loading.value = true
  const res = await getKeyWordList({
    keyword_id: props.taskId,
    status_in: '1',
    num: 10000
  })
  loading.value = false
  let resData = JSON.parse(res)

  keywordList.value = (resData.result.data || []).map((dd: any) => {
    return {
      ...dd,
      showPersion:
        dd.operator_type == 1 ? dd.Customer.mobile?.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') : dd.Admin.remarks
    }
  })
  console.log(keywordList.value)
}

const show = (id: string) => {
  visible.value = true
  initKeyWordList()
}
// 审核通过
const confirm = async () => {
  keywordListUpdate({ keyword_id: props.taskId }, 'keyword_ok').then((res) => {
    try {
      let resData = JSON.parse(res)
      if (resData.code === 200) {
        Message.success(resData.message || '操作成功')
        handleSuccess()
      } else {
        Message.error(resData.message || '操作失败')
      }
    } catch (err) {
      Message.error('操作失败')
    }
  })
}

defineExpose({ show })
</script>

<style lang="scss" scoped>
.dot {
  width: 10px;
  height: 10px;
  border: 2px solid rgb(var(--primary-5));
  border-radius: 50%;
}
</style>
